<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/page-main.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/info.css">
    <link rel="stylesheet" href="css/toolbar.css">
    <script src="js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2085710_55fv7mxo4ft.css">

</head>

<body>
    <div class="header">
        <a class="top" href="#"></a>
        <div class="topbar">
            <div class="topbar-contain">
                <div class="topbar-contain-left">
                    <a href="#">小米商城</a><span>|</span>
                    <a href="#">MIUI</a><span>|</span>
                    <a href="#">IoT</a><span>|</span>
                    <a href="#">云服务</a><span>|</span>
                    <a href="#">金融</a><span>|</span>
                    <a href="#">有品</a><span>|</span>
                    <a href="#">小爱开放平台</a><span>|</span>
                    <a href="#">企业团购</a><span>|</span>
                    <a href="#">资质证照</a><span>|</span>
                    <a href="#">协议下载</a><span>|</span>
                    <a href="#">下载app</a><span>|</span>
                    <a href="#">智能生活</a><span>|</span>
                    <a href="#">Select Location</a>
                </div>
                <div class="topbar-contain-right">
                    <a  href="#">登陆</a><span>|</span>
                    <a  href="#">注册</a><span>|</span>
                    <a  href="#">消息通知</a>
                    <a  id="shopcar" href="#"> <i class="iconfont icon-gouwuche"></i> 购物车(0)</a>
                </div>
            </div>
        </div>
        <div class="header-site">

            <a class="logoer" href="#">
                <a class="home-logo" href="#"></a>
                <a class="mi-logo" href="#"></a>
                <a class="tab" href=""></a>
            </a>
            <div class="header-site-nav">
                <span>
                    <a href="#">小米手机</a>
                    <a href="#">Redmi 红米</a>
                    <a href="#">电视</a>
                    <a href="#">笔记本</a>
                    <a href="#">家电</a>
                    <a href="#">路由器</a>
                    <a href="#">智能硬件</a>
                    <a href="#">服务</a>
                    <a href="#">社区</a>
                </span>
            </div>
            <div class="header-site-search">
                <form>
                    <input class="searchbox" type="text" placeholder="Redmi K30 Pro">
                    <input class="searchbutton" type="submit" value="" >
                    <!-- <a href="#"><i class="iconfont icon-sousuo"></i></a> -->
                </form>
            </div>

        </div>
    </div>
    <div class="content">
        <div class="swiper">
            <div class="swiper-right-nav">
                <ul class="swiper-right-nav-ul">
                    <li><a href="#">手机 电话卡<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">电视 盒子<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">笔记本 显示器<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">家电 插线板<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">出行 穿戴<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">智能 路由器<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">电源 配件<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">健康 儿童<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">耳机 音箱<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                    <li><a href="#">生活 箱包<em class="iconfont icon-xiangyoujiantou"></em></a></li>
                </ul>
            </div>
            <div class="swiper-content">
                <img class="swiper-img" src="images/1.jpg" alt="">
                <img class="swiper-img" src="images/2.jpg" alt="">
                <img class="swiper-img" src="images/3.webp" alt="">
                <img class="swiper-img" src="images/4.webp" alt="">
                <img class="swiper-img" src="images/5.jpg" alt="">
                <img class="swiper-img" src="images/6.webp" alt="">
            </div>
            <button id="prev"></button>
            <button id="next"></button>

            <div id="btns">
                <span class="current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="content-bottom">
            <div class="content-bottom-left">
                <ul class="content-bottom-left-ul">
                    <li>
                        <a href="#"><img src="images/mi-miaosha.png" alt="">小米秒杀</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/mi-tuangou.png" alt="">企业团购</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/mi-Fma.png" alt="">F码通道</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/mi-mifencard.png" alt="">米粉卡</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/mi-jiuhuanxin.png" alt="">以旧换新</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/mi-shoujichongzhi.png" alt="">话费充值</a>
                    </li>
                </ul>
            </div>
            <div class="content-bottom-right">
                <a href="#"><img src="images/99.jpg" alt=""></a>
                <a href="#"><img src="images/98.jpg" alt=""></a>
                <a href="#"><img src="images/97.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <div class="page-main">
        <div class="page-container">
            <h2>小米闪购</h2>
            <div class="row">
                <div class="flashsale-countdown">
                    <!-- <div class="rount">10:00场</div>
                    <image src="images/闪电.png"></image>
                    <div class="desc">本场已结束</div>
                    <div class="countdown">
                        <span>00</span>
                        <i>:</i>
                        <span>00</span>
                        <i>:</i>
                        <span>00</span>
                    </div> -->
                </div>
                <div class="flashsale-list">
                    <!-- <ul class="swiper-wrapper">
                        <li></li>
                        <li></li> 
                        <li></li> 
                    </ul> -->
                </div>
            </div>
            <a href="#"><img src="images/mi10.webp" alt=""></a>

            <h2>手机</h2>
            <div class="page-phone">
                <a href="#"><img src="images/95.webp" alt=""></a>
                <div class="page-phone-list">
                    <ul>
                        <li>
                            <a href="#"></a><img src="images/94.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/93.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/92.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/91.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/90.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/89.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/88.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                        <li>
                            <a href="#"></a><img src="images/87.webp" alt="">
                            <p class="fristline">小米10 至尊版</p>
                            <p class="secondline">120X 变焦/120W秒充/120Hz屏幕</p>
                            <p class="thirdline">5229元起</p>
                        </li>
                    </ul>
                </div>
            </div>
            <a href="#"><img src="images/mi-pen.webp" alt=""></a>
            <h2>视频</h2>
            <div class="page-video">
                <ul>
                    <li>
                        <a href="#"></a>
                        <div><img src="images/mi-video1.webp" alt=""></div>
                        <h3>Redmi 10X系列发布会</h3>
                        <p>Redmi 10X系列发布会</p>
                    </li>
                    <li>
                        <a href="#"></a>
                        <div><img src="images/mi-video2.webp" alt=""></div>
                        <h3>Redmi 10X系列发布会</h3>
                        <p>Redmi 10X系列发布会</p>
                    </li>
                    <li>
                        <a href="#"></a>
                        <div><img src="images/mi-video3.webp" alt=""></div>
                        <h3>Redmi 10X系列发布会</h3>
                        <p>Redmi 10X系列发布会</p>
                    </li>
                    <li>
                        <a href="#"></a>
                        <div><img src="images/mi-video4.webp" alt=""></div>
                        <h3>Redmi 10X系列发布会</h3>
                        <p>Redmi 10X系列发布会</p>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div class="footer">
        <div class="footer-service">
            <ul>
                <li><a href="#"><i class="iconfont icon-buoumaotubiao46"></i>预约维修服务</a></li>
                <li><a href="#"><i class="iconfont icon-7tianwuliyoutuihuo"></i>7天无理由退货</a></li>
                <li><a href="#"><i class="iconfont icon-15tian"></i>15天免费换货</a></li>
                <li><a href="#"><i class="iconfont icon-gift"></i>满99元包邮</a></li>
                <li><a href="#"><i class="iconfont icon-location"></i>520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer-nav">
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">购物管理</a></dd>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">订单操作</a></dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">自动服务</a></dd>
                <dd><a href="#">相关下载</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权体验店</a></dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">投资者关系</a></dd>
                <dd><a href="#">企业社会责任</a></dd>
                <dd><a href="#">廉洁举报</a></dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd><a href="#">新浪微博</a></dd>
                <dd><a href="#">官方微信</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">公益基金会</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="#">F码通道</a></dd>
                <dd><a href="#">礼物码</a></dd>
                <dd><a href="#">防伪查询</a></dd>
            </dl>
            <div class="footer-tel">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00(仅收市话费)</p>
                <a class="mcs" href="#"> <i class="iconfont icon-ai25"></i>人工客服</a><br>
                <span>关注小米：</span>
                <a href="#"><i class="iconfont icon-xinlangweibo"></i></a>
                <a href="#"><i class="iconfont icon-weixin"></i></a>
            </div>
        </div>

    </div>
    <div class="info">
        <div class="info-container">
            <div class="info-logo"></div>
            <div class="info-text">
                <p>
                    <a href="#">小米商城 </a><span>|</span>
                    <a href="#">MIUI </a><span>|</span>
                    <a href="#">米家 </a><span>|</span>
                    <a href="#">米聊 </a><span>|</span>
                    <a href="#">多看 </a><span>|</span>
                    <a href="#">游戏 </a><span>|</span>
                    <a href="#">政企服务 </a><span>|</span>
                    <a href="#">小米天猫店 </a><span>|</span>
                    <a href="#">小米集团隐私政策 </a><span>|</span>
                    <a href="#">小米公司儿童信息保护规则 </a><span>|</span>
                    <a href="#">小米商城隐私政策 </a><span>|</span>
                    <a href="#">小米商城用户协议 </a><span>|</span>
                    <a href="#">问题反馈 </a><span>|</span>
                    <a href="#">Select Location </a>
                </p>
                <p>
                    ©<a href="#">mi.com</a>京ICP证110507号<a href="#"> 京ICP备10046444号</a><a href="#">
                        京公网安备11010802020134号</a><a href="#">京网文[2020]0276-042号</a><br>
                    <a href="#">（京）网械平台备字（2018）第00005号</a><a href="#"> 互联网药品信息服务资格证 (京)-非经营性-2014-0090</a><a href="#">
                        营业执照</a><a href="#">医疗器械质量公告</a><br>
                    <a href="#">增值电信业务许可证</a> 网络食品经营备案 京食药网食备202010048 <a href="#">食品经营许可证</a><br> 违法和不良信息举报电话：171-5104-4404 <a href="#"> 知识产权侵权投诉</a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

                </p>
            </div>
            <div class="info-container-img">
                <a href="#"><img src="images/truste.png" alt=""></a>
                <a href="#"><img src="images/v-logo-2.png" alt=""></a>
                <a href="#"><img src="images/v-logo-1.png" alt=""></a>
                <a href="#"><img src="images/v-logo-3.png" alt=""></a>
                <a href="#"><img class="img2" src="images/v-logo-4.png" alt=""></a>
            </div>
        </div>
        <div class="slogan"></div>
    </div>

    <div class="toolbar">
        <a class="item" href="#">
            <div class="icon">
                <img class="static" src="images/shouji1.png" alt="">
                <img class="hover" src="images/shouji2.png" alt="">
            </div>
            <span>手机APP</span>
        </a>
        <a class="item" href="#">
            <div class="icon">
                <img class="static" src="images/geren1.png" alt="">
                <img class="hover" src="images/geren2.png" alt="">
            </div>
            <span>个人中心</span>
        </a>
        <a class="item" href="#">
            <div class="icon">
                <img class="static" src="images/shouhou1.png" alt="">
                <img class="hover" src="images/shouhou2.png" alt="">
            </div>
            <span>售后服务</span>
        </a>
        <a class="item" href="#">
            <div class="icon">
                <img class="static" src="images/kefu1.png" alt="">
                <img class="hover" src="images/kefu2.png" alt="">
            </div>
            <span>人工客服</span>
        </a>
        <a class="item" href="#">
            <div class="icon">
                <img class="static" src="images/gouwuche1.png" alt="">
                <img class="hover" src="images/gouwuche2.png" alt="">
            </div>
            <span>购物车</span>
        </a>
        <a id="totop" href="#">
            <div class="icon">
                <img class="static" src="images/huidingbu1.png" alt="">
                <img class="hover" src="images/huidingbu2.png" alt="">
            </div>
            <span>回顶部</span>
        </a>
    </div>
    <script>
        let index = 0;
        $("#next").click(function() {
            index++;
            if (index > 4) {
                index = 0;
            }
            animate(300)

        })
        $("#prev").click(function() {
            index--;
            if (index < 0) {
                index = 4;
            }
            animate(300)
        })

        function animate(speed) {
            $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed)
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        }

        $("#btns span").click(function() {
                $(this).addClass("current").siblings().removeClass("current");
                index = $(this).index();
                animate(300)
            })
            // mi和桌面图标切换
        $(".tab").mouseover(function() {
            $(".mi-logo,.home-logo").animate({
                left: "55px"
            }, 200)
        })
        $(".tab").mouseout(function() {
            $(".home-logo,.mi-logo").animate({
                left: "0px"
            }, 200)
        })

        $(window).scroll(function() {
            let scrollTop = $(window).scrollTop();
            let opacity;
            opacity = scrollTop / 150;
            if (scrollTop >= 200) {
                opacity = 1;
            }
            $("#totop").css({
                opacity: opacity
            })
        })
        $("#totop").click(function() {
            $("html").animate({
                scrollTop: "0px"
            }, 1000)
        })
    </script>
</body>

</html>